<template>
  <el-main>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/homepage/userinfo'}">用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{keykey}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="id">编号</el-dropdown-item>
              <el-dropdown-item command="username">用户名</el-dropdown-item>
              <el-dropdown-item command="password">密码</el-dropdown-item>
              <el-dropdown-item command="permission">权限</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <!-- 选择区域 -->
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="value"
                    class="input-with-select" clearable=""  @clear="findlist(key,value)">
            <el-button slot="append" icon="el-icon-search" @click="findlist(key,value)"  ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addUserVisible=true">添加用户</el-button>
        </el-col>


      </el-row>
      <el-table :data="searchlist" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="用户编号" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="权限"  prop="permission">
          <template slot-scope="{row:{permission}}">
            <span v-if="permission==1">管理员</span>
            <span v-if="permission==0" >普通用户</span>

          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right"  width="150px">
          <!-- slot-scope用来获取当前表格的数据对象
               用scope.row可以获取当前列的数据 -->
          <template slot-scope="scope" >
            <el-tooltip  effect="dark" content="修改" placement="top">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="changeFormBind(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteForm(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码显示 -->
      <div class="block">
        <el-pagination


          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加信息区域 -->
    <el-dialog
      title="添加用户信息"
      :visible.sync="addUserVisible"
      width="30%" @close="addUserClosed">
      <!-- 主体区域 -->
      <el-form :model="addUser"  :rules="addUserRules" ref="addUserRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUser.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUser.password"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="permission">
          <el-radio-group v-model="addUser.permission">
            <el-radio label="1">管理员</el-radio>
            <el-radio label="0">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addUserVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 修改信息区域 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="changeUserVisible"
      width="30%">
      <!-- 主体区域 -->
      <el-form :model="changeUser"   ref="changeUserRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="changeUser.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="changeUser.password" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="permission">
          <el-radio-group v-model="changeUser.permission">
            <el-radio label="1">管理员</el-radio>
            <el-radio label="0">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="changeUserVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeForm">确 定</el-button>
  </span>
    </el-dialog>

  </el-main>
</template>
<script>
export default {
  name:'userinfo',
  data(){
    var validatePass = (rule, value, callback) => {
      if (value.length<=6) {
        callback(new Error('密码长度不能小于6位'));
      }
      return callback();
    };
    return{
      userinfolist:[],
      searchlist:[],
      keykey:'选择',
      key:'',//搜索类别
      value:'',//搜索值
      total:0,
      alltotal:0,
      addUserVisible : false,
      changeUserVisible:false,

      addUser:{
        username:'',
        password:'',
        permission:''

      },
      changeUser:{
        username:'',
        password:'',
        permission:''

      },
      addUserRules : {
        username:[
          {required:true,message:'请输入账号',trigger:'blur'}

        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {validator:validatePass,trigger:'blur'}
        ]
      }


    }
  },
  created(){
    this.getList();
    this.$message.success("获取成功");

  },
  methods:{
    getList: function(){
      this.$axios.get('/api/user/list').then(res=>{
        this.userinfolist=res.data;
        this.searchlist=res.data;
        this.alltotal=res.data.length;
        this.total=res.data.length;
        console.log(this.searchlist);
      }).catch(err=>{
        console.log(err);
      })
    },
    findlist: function(key,value){
      if(value==''){
        this.searchlist=this.userinfolist;
        this.total=this.alltotal;
        this.keykey='选择';
      }else{
        if (value=='普通用户'){value=0;}
        if (value=='管理员'){value=1;}
        this.$axios.get('/api/user/search',{
          params:{
            key:key,
            value:value
          }
        }).then(res=>{
          this.searchlist=res.data;
          this.total=res.data.length;

          console.log(res.data);
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    addForm : function(){
      this.$refs.addUserRef.validate(valid=>{
        console.log(valid);
        if(!valid) return;
        let addUser = this.addUser;

        this.$axios.get('/api/user/register',{
          params:{
            username:addUser.username,
          }
        }).then(res=>{
          if (res.data==false){this.$axios.post('/api/user/insert',addUser
          ).then(res=>{
            this.$message.success('添加用户成功');
            this.addUserVisible = false;
            this.getList();
          })

          }else{this.$message.error('用户名已经被注册');}
        })


      })
    },
    deleteForm: function(res){
      const uuu = sessionStorage.getItem('user');
      if (res.username==uuu){
        this.$message.error('你无法删除自己');
      }else{
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$axios.get('/api/user/delete',{
            params:{
              id:res.id
            }
          }).then(res=>{
            this.$message.success('删除用户成功');
            this.getList();
          }).catch(err=>{
            console.log(err);
          })
        })}
    },
    changeForm:function(){

      let changeUser = this.changeUser;
      this.$axios.post('/api/user/insert',changeUser
      ).then(res=>{
        console.log(res);
        this.$message.success('修改用户权限成功');
        this.changeUserVisible = false;
        this.getList();

      }).catch(err=>{
        console.log(err);
      })

    },
    handleCommand: function(command){
      this.key=command;
      switch(command){
        case 'id':this.keykey='编号';break;
        case 'username':this.keykey='用户名';break;
        case 'password':this.keykey='密码';break;
        case 'permission':this.keykey='权限';break;

      }

    },
    //关闭对话框重置信息
    addUserClosed : function(){
      this.$refs.addUserRef.resetFields();

    },
    changeFormBind: function(res){
      console.log(res);
      this.changeUser=res;
      this.changeUserVisible=true;
      this.getList();

    },
  }


}
</script>
<style lang="less">
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 12px;
}
.el-table{
  margin-top: 15px;//表格与搜索框边距
  font-size: 15px;
}
.el-pagination{
  margin-top: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;


}
.el-icon-arrow-down {
  font-size: 12px;
  margin-top: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

</style>
